{include file="common/_meta" /}

<link href="/static/admin/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-container">
	<form action="" method="post" class="form form-horizontal" id="form-article-add">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品名称：</label>
			<div class="formControls col-xs-8 col-sm-9 col-md-5">
				<input type="text" class="input-text" value="{$info.goods_name|default=''}" placeholder="" id="pd_name" name="goods_name">
			</div>
		</div>
		<input type="text"  class="hidden" value="{$info.id|default=''}" name="id">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品分类：</label>
			<div class="formControls col-xs-8 col-sm-9 col-md-5"> <span class="select-box">
				<select name="cate_id" class="select">
					<option value="0" disabled="true">选择产品分类</option>
					{volist name="cate" id="vo"}
						<option value="{$vo.id}">{$vo.cate_name}</option>
					{/volist}
				</select>
				</span> </div>
		</div>
        
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">排序值：</label>
			<div class="formControls col-xs-8 col-sm-9 col-md-5">
				<input type="text" class="input-text" value="{$info.sort|default=0}" placeholder="" id="" name="sort">
			</div>
		</div>
        <div class="row cl hidden">
            <label class="form-label col-xs-4 col-sm-2">商品单位：</label>
            <div class="formControls col-xs-8 col-sm-9 col-md-5">
                <input type="text" class="input-text" value="{$info.goods_unit|default=''}" placeholder="" id="" name="goods_unit">
            </div>
        </div>
				
			<div class="row" id="sku">
				{if condition="$info['goods_sku'] eq null"}
				<div class="row cl sku_item">
					<label class="form-label col-xs-4 col-sm-2">商品规格：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" name="sku_list[0][sku_id]" class="hidden" placeholder="" value="0">
						<div class="col-md-3">
							<div class="formControls col-xs-12 col-sm-12 col-md-9" style="padding: 0">
								<input type="text" name="sku_list[0][sku_name]" id="" placeholder="" value="" class="input-text">
							</div>
						</div>
						<div class=" col-md-2">
							<label class="form-label col-xs-12 col-sm-12 col-md-3" style="text-align: left;padding: 0">价格</label>
							<div class="formControls col-xs-12 col-sm-12 col-md-9" style="padding: 0">
								<input type="number" name="sku_list[0][realprice]" id="" placeholder="" value="" class="input-text">
							</div>
						</div>
						<div class=" col-md-2">
							<label class="form-label col-xs-12 col-sm-12 col-md-3" style="text-align: left;padding: 0">原价</label>
							<div class="formControls col-xs-12 col-sm-12 col-md-9" style="padding: 0">
								<input type="number" name="sku_list[0][oldprice]" id="" placeholder="" value="" class="input-text">
							</div>
						</div>
						<div class=" col-md-2">
							<button class="btn btn-primary" onclick="return addSku()">添加</button>
						</div>
					</div>
				</div>
				{/if}

				{volist name="info.goods_sku" id="vo"}
				<div class="row cl sku_item">
					<label class="form-label col-xs-4 col-sm-2">商品规格：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" name="sku_list[{$i}][sku_id]" class="hidden" placeholder="" value="{$vo['sku_id']|default='0'}">
						<div class="col-md-3">
							<div class="formControls col-xs-12 col-sm-12 col-md-9" style="padding: 0">
								<input type="text" name="sku_list[{$i}][sku_name]" id="" placeholder="" value="{$vo['sku_name']|default=''}" class="input-text">
							</div>
						</div>
						<div class=" col-md-2">
							<label class="form-label col-xs-12 col-sm-12 col-md-3" style="text-align: left;padding: 0">价格</label>
							<div class="formControls col-xs-12 col-sm-12 col-md-9" style="padding: 0">
								<input type="number" name="sku_list[{$i}][realprice]" id="" placeholder="" value="{$vo['realprice']|default=0}" class="input-text">
							</div>
						</div>
						<div class=" col-md-2">
							<label class="form-label col-xs-12 col-sm-12 col-md-3" style="text-align: left;padding: 0">原价</label>
							<div class="formControls col-xs-12 col-sm-12 col-md-9" style="padding: 0">
								<input type="number" name="sku_list[{$i}][oldprice]" id="" placeholder="" value="{$vo['oldprice']|default=0}" class="input-text">
							</div>
						</div>
						<div class=" col-md-2">
							{if condition="$i eq 1"}
								<button class="btn btn-primary" onclick="return addSku()">添加</button>
							{else /}
								<button class="btn btn-danger" onclick="return rmSku(this,{$vo['sku_id']})">移除</button>
							{/if}
						</div>
					</div>
				</div>
				{/volist}
			</div>
				
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">产品图：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div class="uploader-thum-container">
                    <div id="fileList" class="uploader-list">
                    	<div id="" class="item">
							<div class="pic-box"><img style="width: 100px;height: 100px" src="{$info.goods_pic|default='/upload/default.jpg'}"></div>
							<div class="info"></div>
						</div>
                    </div>
                    <div id="filePicker" style="margin-top: 10px;">选择图片</div>
                    <button onclick="return false;" id="btn-star" class="btn btn-default btn-uploadstar radius ml-10" style="margin-top: 10px;">开始上传</button>
                </div>
            </div>
        </div>
		<input class="hidden pd_pic" type="text" value="{$info.goods_pic|default=''}" name='goods_pic'>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">详细内容：</label>
			<div class="formControls col-xs-4 col-sm-6"> 
				<textarea id="editor" type="text/plain" name="goods_detail" style="width:100%;height:400px;">{$info.goods_detail|default=''}</textarea>

			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button onClick="return savePro();" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 确认提交</button>
				<!-- <button onClick="layer_close();" class="btn btn-default radius" type="reset">&nbsp;&nbsp;取消&nbsp;&nbsp;</button> -->
			</div>
		</div>
	</form>
</div>

{include file="common/_footer" /}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/static/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="/static/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="/static/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="/static/admin/lib/webuploader/0.1.5/webuploader.min.js"></script> 
<script type="text/javascript" src="/static/admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="/static/admin/lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="/static/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
	
	$list = $("#fileList"),
	$btn = $("#btn-star"),
	state = "pending",
	uploader;

	var uploader = WebUploader.create({
		auto: false,
		// swf: '/static/admin/lib/webuploader/0.1.5/Uploader.swf',
		// 文件接收服务端。
		server: '/static/admin/lib/webuploader/0.1.5/server/fileupload.php',
	
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick:'#filePicker',
	
		// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		resize: false,
		// 只允许选择图片文件。
		accept: {
			title: 'Images',
			extensions: 'gif,jpg,jpeg,bmp,png',
			mimeTypes: 'image/jpg,image/jpeg,image/png'
		}
	});
	uploader.on( 'fileQueued', function( file ) {
		var $li = $(
			'<div id="' + file.id + '" class="item">' +
				'<div class="pic-box"><img></div>'+
				'<div class="info">' + file.name + '</div>' +
				'<p class="state">等待上传...</p>'+
			'</div>'
		),
		$img = $li.find('img');
		$list.html( $li );
		// 创建缩略图
		// 如果为非图片文件，可以不用调用此方法。
		// thumbnailWidth x thumbnailHeight 为 100 x 100
		uploader.makeThumb( file, function( error, src ) {
			if ( error ) {
				$img.replaceWith('<span>不能预览</span>');
				return;
			}
	
			$img.attr( 'src', src );
		}, 100, 100 );
	});
	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
		var $li = $( '#'+file.id ),
			$percent = $li.find('.progress-box .sr-only');
	
		// 避免重复创建
		if ( !$percent.length ) {
			$percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
		}
		$li.find(".state").text("上传中");
		$percent.css( 'width', percentage * 100 + '%' );
	});
	
	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function( file, response ) {
		$( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
        $('.pd_pic').val('/upload/goods/'+response+getExt(file.name))
	});
	
	// 文件上传失败，显示上传出错。
	uploader.on( 'uploadError', function( file ) {
		$( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
	});
	
	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on( 'uploadComplete', function( file ) {
		$( '#'+file.id ).find('.progress-box').fadeOut();
	});
	uploader.on('all', function (type) {
        if (type === 'startUpload') {
            state = 'uploading';
        } else if (type === 'stopUpload') {
            state = 'paused';
        } else if (type === 'uploadFinished') {
            state = 'done';
        }

    });

    $btn.on('click', function () {
        if (state === 'uploading') {
            uploader.stop();
        } else {
            uploader.upload();
        }
    });

});

$(function(){
	var ue = UE.getEditor('editor', {
		toolbars: [
			['source', 'undo', 'redo', 'bold', 'italic', 'underline', 'fontborder', 'fontfamily', 'fontsize', 'justifyleft', 'justifyright', 'justifycenter', 'justifyjustify', 'simpleupload', 'forecolor',
				'backcolor', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
		]
	});
});
function getExt(uploadf){
  	var index1 = uploadf.lastIndexOf(".");
	var index2 = uploadf.length;
	return uploadf.substring(index1,index2);
}

// 保存商品
function savePro(){
    $.post('{:url("Mall/addGoods")}',$('#form-article-add').serialize()).success(function(data){
    	console.log(data);
    	layer.msg(data.msg);
    	if(data.code){
    		setTimeout(function(){
    			location.href = '{:url("Mall/goods")}';
    		},500);
    	}
    });
    return false;
}

var i = 0;
// 新增sku
function addSku() {
	i++;
	var html = 
		'<div class="row cl sku_item">' +
			'<label class="form-label col-xs-4 col-sm-2">商品规格：</label>' +
			'<div class="formControls col-xs-8 col-sm-9">' +
				'<div class="col-md-3">' +
					'<div class="formControls col-xs-12 col-sm-12 col-md-9" style="padding: 0">' +
						'<input type="text" name="sku_list['+i+'][sku_name]" id="" placeholder="" value="" class="input-text">' +
					'</div>' +
				'</div>' +
				'<div class=" col-md-2">' +
					'<label class="form-label col-xs-12 col-sm-12 col-md-3" style="text-align: left;padding: 0">价格</label>' +
					'<div class="formControls col-xs-12 col-sm-12 col-md-9" style="padding: 0">' +
						'<input type="number" name="sku_list['+i+'][realprice]" id="" placeholder="" value="0" class="input-text">' +
					'</div>' +
				'</div>' +
				'<div class=" col-md-2">' +
					'<label class="form-label col-xs-12 col-sm-12 col-md-3" style="text-align: left;padding: 0">原价</label>' +
					'<div class="formControls col-xs-12 col-sm-12 col-md-9" style="padding: 0">' +
						'<input type="number" name="sku_list['+i+'][oldprice]" id="" placeholder="" value="0" class="input-text">' +
					'</div>' +
				'</div>' +
				'<div class=" col-md-2">' +
					'<button class="btn btn-danger" onclick="return rmSku(this)">移除</button>' +
				'</div>' +
			'</div>' +
		'</div>';
	$('#sku').append(html);
	return false;
}

// 移除sku
function rmSku(obj, skuid = 0) {
	if (skuid) {
		$.get("{:url('rmSku')}", {skuid:skuid}, function(data){
			console.log(data);
			layer.msg(data.msg);
			if (data.code) {
				$(obj).parent().parent().parent().remove();
			}
		});
	}
	return false;
}

</script>
</body>
</html>